<style>
    #user-add {
        padding: 20px 25px 25px 0;
    }
    #user-add .layui-form-label{
        width: 90px;
    }
    #user-add .layui-input-block{
        margin-left: 120px;
    }
    #user-add .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }
</style>
<div class="layui-fluid" id="user-add">
    <form class="layui-form" action="" lay-filter="user-add-form">
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label layui-form-label-detail">所属公司：</label>
                    <div class="layui-input-block layui-input-block-html" id="tenantName">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label layui-form-label-detail">所属部门：</label>
                    <div class="layui-input-block layui-input-block-html" id="deptName">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">用户工号：</label>
                    <div class="layui-input-block" >
                        <input type="text" name="userNo" minlength="2" maxlength="100" lay-verify="range"
                               autocomplete="off" class="layui-input" placeholder="请输入用户工号">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">登录账号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" minlength="4" maxlength="100" lay-verify="range|username"
                               autocomplete="off" class="layui-input" placeholder="请输入登录账号">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">用户姓名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="uname" minlength="2" maxlength="100" lay-verify="range"
                               autocomplete="off" class="layui-input" placeholder="请输入用户姓名">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">身份证号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="identificationNo" minlength="10" maxlength="64"
                               autocomplete="off" class="layui-input" placeholder="请输入身份证号">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">用户性别：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="0" title="男性">
                        <input type="radio" name="sex" value="1" title="女性">
                        <input type="radio" name="sex" value="2" title="保密" checked="">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">部门主管：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="deptLeaderFlg" title="否" value="0" checked>
                        <input type="radio" name="deptLeaderFlg" title="是" value="1">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label">用户岗位：</label>
                    <div class="layui-input-block">
                        <select name="postId" lay-filter="postSelect" id="postSelect" lay-search="" >
                            <option value="">请选择</option>
                            <option th:each="post:${postList}" th:value="${post.postId}"
                                    th:text="${post.postName}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">入职时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="joinDate" name="joinDate" lay-verify="required"
                               autocomplete="off" class="layui-input" placeholder="请输入入职时间">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label">文化水平：</label>
                    <div class="layui-input-block">
                        <select name="literacy" id="literacy" lay-search="" >
                        </select>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label febs-form-item-require">用户类别：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="userType" lay-filter="userType" title="本工" value="1" checked>
                        <input type="radio" name="userType" lay-filter="userType" title="外包工" value="2">
                        <input type="radio" name="userType" lay-filter="userType" title="外协工" value="3">
                    </div>
                </div>
            </div>
            <div class="layui-form-item febs-hide contractor-info">
                <div class="layui-col-md6">
                    <label class="layui-form-label">承包商名称：</label>
                    <div class="layui-input-block">
                        <select name="contractorId" lay-filter="contractorSelect" id="contractorSelect" lay-search="" >
                            <option value="">请选择</option>
                            <option th:each="contractor:${contractorList}" th:value="${contractor.contractorId}"
                                    th:text="${contractor.contractorName}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">承包队名称：</label>
                    <div class="layui-input-block">
                        <select name="contractorTeamId" lay-filter="contractorTeamSelect" id="contractorTeamSelect" lay-search="" >
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md6">
                    <label class="layui-form-label">用户手机：</label>
                    <div class="layui-input-block">
                        <input type="tel" name="mobile" lay-verify="phone" autocomplete="off" class="layui-input" placeholder="请输入用户手机号">
                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label">用户邮箱：</label>
                    <div class="layui-input-block">
                        <input type="text" name="email" lay-verify="email" maxlength="50" autocomplete="off"
                               class="layui-input" placeholder="请输入用户邮箱">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label febs-form-item-require">分配角色：</label>
                <div class="layui-input-block">
                    <select name="roleId"
                            lay-verify="required"
                            xm-select-direction="down"
                            xm-select="user-update-role"
                            xm-select-skin="default">
                    </select>
                </div>
            </div>
            <div class="layui-form-item febs-hide">
                <label class="layui-form-label febs-form-item-require">状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="有效" checked="">
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label febs-form-item-require">用户签名：</label>
                <input type="hidden" id="sign" name="sign">
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div class="layui-col-md2">
                            <button type="button" class="layui-btn" id="upload-sign">上传签名</button>
                        </div>
                        <div class="layui-col-md6">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                <div class="layui-upload-list" id="upload-sign-preview"></div>
                            </blockquote>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <textarea name="description" maxlength="100" class="layui-textarea" placeholder="请输入备注"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript" type="text/javascript">
    layui.use(['febs', 'form', 'formSelects', 'validate','laydate', 'upload'], function () {
        var $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            formSelects = layui.formSelects,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate,
            $view = $('#user-add'),
            $deptName = $('#deptName'),
            $tenantName = $('#tenantName'),
            validate = layui.validate;
        form.verify(validate);
        form.render();
        let deptId = POPUP_DATA.deptId;
        let tenantId = POPUP_DATA.tenantId
        $tenantName.html(POPUP_DATA.tenantName);
        $deptName.html(POPUP_DATA.deptName);

        upload.render({
            elem: '#upload-sign',
            url: ctx + 'user/uploadSign', // 实际使用时改成您自己的上传接口即可。
            multiple: false,
            accept: 'images',
            acceptMime: 'image/*',
            before: function (obj) {
                $('#upload-sign-preview').html('');
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-sign-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 120px">')
                });
            },
            done: function (res) {
                if (res.code === 200) {
                    $('#sign').val(res.data)
                }
            }
        });


        laydate.render({
            elem: "#joinDate",
            type: 'date',
        })

        febs.initDictItemSelect($view.find("#literacy"),'SYSTEM_USER_LITERACY',null,null);
        formSelects.render();

        formSelects.config('user-update-role', {
            searchUrl: ctx + 'role/getRoleListByTenantId',
            data: {
                tenantId: tenantId
            },
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].roleName,
                        value: data[i].roleId
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                febs.alert.error('获取角色列表失败');
            }
        });

        form.on('submit(user-add-form-submit)', function (data) {
            data.field.deptId = deptId;
            data.field.tenantId = tenantId;
            // console.log(data.field);
            febs.modal.confirm('保存用户信息', '确定保存用户信息？', function (index) {
                febs.post(ctx + 'user', data.field, function () {
                    layer.closeAll();
                    febs.alert.success('新增用户成功，初始密码为系统默认密码');
                    $('#febs-user').find('#query').click();
                });
            });
            return false;
        });

        form.on('radio(userType)', function (data) {
            if(data.value==='2'){
                $view.find(".contractor-info").show();
            }else{
                $view.find(".contractor-info").hide();
            }
        });

        form.on('select(contractorSelect)', function(obj){
            // 获取选中项 value
            var data={
                contractorId : obj.value
            }
            $("#contractorTeamSelect").empty();
            febs.getSync(ctx + 'baseContractorTeam', data, function (r) {
                console.log("承包队列表"+JSON.stringify(r.data))
                var contractorTeamList = r.data;
                $.each(contractorTeamList,function (index,item) {
                    var options =  '<option value="'+item.contractorTeamId+'">'+item.teamName+'</option>'
                    $("#contractorTeamSelect").append(options);
                })
            });
            form.render();
        });

    });
</script>
